<template>
  <div class="container">
    <!-- 一级标题 -->
    <div class="shibie">
      <div class="shibie_title">技术：数据资产识别</div>
      <!-- <div class="shibie_content">
        在识别战术领域，主要聚焦在数据资产发现和处理，本报告重点对数据资源发现，数据资产识别，数据资产处理（分析），数据分类分级，数据资产打标作出描述。
      </div> -->
    </div>
    <!-- 二级标题 -->
    <div class="shibie2">
      <el-table :data="tableData" border style="width: 95%; margin-left: 30px">
        <el-table-column prop="title" label="标题" width="100">
        </el-table-column>
        <el-table-column prop="basis" label="基本概念" width="620">
        </el-table-column>
        <el-table-column prop="main" label="主要实现"> </el-table-column>
      </el-table>
    </div>

    <!-- 扩展技术 -->
    <div class="technical-expansion">
      <h2 style="padding: 10px; margin: 20px">扩展技术</h2>
      <div style="margin-top: 20px">
        <span
            type="primary"
            style="margin-left: 45px; color: #429ccd; cursor: pointer"
            @click="drawer1 = true"
        >
          数据内容识别
        </span>
        <el-drawer v-model="drawer1" title="数据内容识别" :with-header="false">
          <div style="margin-top: 20px">
            <span style="display: block; text-indent: 2em;">数据内容识别与数据资产识别技术实现类似，但侧重点不一。数据资产识别重点找出数据资源特别，结合资产属性，自动化梳理和识别出资产保护目录。数据内容识别要求对整个数据进行全文识别，旨在发现。</span>
            <h5 style="display: block; margin-top: 10px;">基本概念</h5>
            <span style="display: block; text-indent: 2em;">数据内容识别，主要指针对结构化以及非结构化的数据内容进行识别，识别
                范围覆盖网页、邮件传输、终端刻录、拷贝传输等。数据内容识别能够为了对敏
                感数据进行控制和管理。</span>
            <h5 style="display: block; margin-top: 10px;">主要实现</h5>
            <span style="display: block; text-indent: 2em;">数据内容识别主要实现方式包括文字识别、图片识别、语音识别等技术。</span>
            <span style="display: block; text-indent: 2em;margin: 10px;"><b># 文字识别</b></span>
            <span style="display: block; text-indent: 2em;">基于行业前沿的深度学习技术，提供通用印刷体识别、通用印刷体识别（高
                  精度版）、通用手写体识别、英文识别等多种服务，支持将图片上的文字内
                  容，智能识别为可编辑的文本，可应用于随手拍扫描、纸质文档电子化、电
                  商广告审核等多种场景，大幅提升信息处理效率。</span>
            <span style="display: block; text-indent: 2em;margin: 10px;"><b># 图片识别</b></span>
            <span style="display: block; text-indent: 2em;">10对图像进行对象识别，以识别各种不同模式的目标和对象的技术。图像识别
                是立体视觉、运动分析、数据融合等实用技术的基础，在导航、地图与地形
                配准、自然资源分析、天气预报、环境监测、生理病变研究等许多领域重要
                的应用价值。</span>
            <span style="display: block; text-indent: 2em;margin: 10px;"><b># 语音识别</b></span>
            <span style="display: block; text-indent: 2em;">又称自动语音识别 Automatic Speech Recognition，(ASR)，
                其目标是将人类的语音中的词汇内容转换为计算机可读的输入，例如按
                键、二进制编码或者字符序列。与说话人识别及说话人确认不同，后者
                尝试识别或确认发出语音的说话人而非其中所包含的词汇内容。</span>
          </div>

          <div style="margin-top: 60px">
            注释#10:有效的视频内容识别多为抽帧分析，故本文不分析视频内容识别。
          </div>
        </el-drawer>
      </div>
      <div style="margin-top: 20px">
        <span
            type="primary"
            style="margin-left: 45px; color: #429ccd; cursor: pointer"
            @click="drawer2 = true"
        >
          合规性分析
        </span>
        <el-drawer
            class="drawer"
            v-model="drawer2"
            title="合规性分析"
            :with-header="false"
        >
          <div style="margin-top: 20px">
            <span style="display: block; text-indent: 2em;">在数据采集识别后，要首先进行合规性分析，比如政策合规性、法律合规性、
                行业监管合规性等。</span>
            <h5 style="display: block; margin-top: 10px;">基本概念</h5>
            <span style="display: block; text-indent: 2em;">合规性分析在数据内容识别后，利用人工专家或自动化研判模型，通过合规
                    性评估，帮助企业或组织提升系统的数据内容合规安全保障能力，从而实现持续
                    安全运营，能够更好符合数据安全相关的法律法规、标准及规范，保证业务数据
                    的合规、合法。</span>
            <h5 style="display: block; margin-top: 10px;">主要实现</h5>
            <span style="display: block; text-indent: 2em;">目前，合规性分析主要分为违法信息识别、未成年人信息识别、侵权识别、
                  个人敏感信息识别、商业秘密识别、重要数据识别等。主要通过在数据处理过程
                  的采集、传输、存储环节，部署软硬模块实现合规管理。</span>
            <span style="display: block; text-indent: 2em;margin: 10px;"><b># 采集环节合规处理</b></span>
            <span style="display: block; text-indent: 2em;">在数据采集时，在采集终端或上传接口，增加软数据词法、特征分析模块，
                主动告警、删除违规、违法数据。</span>
            <span style="display: block; text-indent: 2em;margin: 10px;"><b># 传输环节合规处理</b></span>
            <span
                style="display: block; text-indent: 2em;">在数据传输时，部署数据合规性处理网关，发现和拦截违规、违法数据。</span>
            <span style="display: block; text-indent: 2em;margin: 10px;"><b># 存储环节合规处理</b></span>
            <span style="display: block; text-indent: 2em;">在数据被集中清洗或统一存储时，或在数据预处理，或在数据落地存储，发
                现和拦截违规、违法数据。</span>
            <span style="display: block; text-indent: 2em;">在部分数据安全工作场景中，需要对特定数据进行合规性分析，比如在做行
                业数据安全监管时，需要对数据加密后格式，加密算法进行识别与合规性处理，
                通过会应用行业内专用工具进行数据合规处理。比如，密评工具箱。
                # 密评工具箱</span>
            <span style="display: block; text-indent: 2em;">将密评确定性的检测内容进行工具化实现，辅助评测机构测评以及企业自
                测。密评工具箱支持以旁路部署的方式接入目标环境中，通过采集样本数据、
                密文分析判定、密码算法还原等功能和方法，快速判定目标系统是否用了密
                码、用的密码是否是国密算法、用的国密是否安全有效，为密评工作提供有
                力支撑。</span>
          </div>

          <div style="margin-top: 60px">
            注释#11:密评工具箱，http://www.ciphergateway.com/product/38916.html
          </div>
        </el-drawer>
      </div>
      <div style="margin-top: 20px">
        <span
            type="primary"
            style="margin-left: 45px; color: #429ccd; cursor: pointer"
            @click="drawer3 = true"
        >
          安全性分析
        </span>
        <el-drawer
            v-model="drawer3"
            title="安全性分析"
            :with-header="false"
        >
         <div style="margin-top: 20px">
            <span style="display: block; text-indent: 2em;">在进行数据的合规性分析12后，要考虑数据安全性分析。对于采集的或录入
                系统的结构化数据可能被引入攻击指令、非法数据操作，对于采集的或录入系统
                的结构化数据可能被引入恶意程序、攻击脚本以及其它非法代码等。</span>
           <h5 style="display: block; margin-top: 10px;">基本概念</h5>
           <span style="display: block; text-indent: 2em;">安全性分析指利用部分数据资产识别扩展技术以及网络安全终端防护、服务
                器防护技术，通过合安全性评估，帮助企业或组织提升系统的数据安全保障能力，
                从而实现持续安全运营，能够更直接降低非法数据集引入恶意攻击。</span>
           <h5 style="display: block; margin-top: 10px;">主要实现</h5>
           <span style="display: block; text-indent: 2em;">除了，恶意代码检测、恶意 APP 分析、僵木蠕系统等应用，数据沙盒技术（Data
                Sandbox）可提供较高可靠的安全性分析。</span>
           <span style="display: block; text-indent: 2em;margin: 10px;"><b># 数据沙盒技术</b></span>
           <span style="display: block; text-indent: 2em;">13多为以虚拟方式模拟一个终端或一个运行环境，检测未知代码在该虚拟环境
                中的运行状况，并根据运行状况来判断其是否是怀有恶意。特别地，数据沙
                盒技术可以应用于大数据领域，不对原始数据进行拷贝和分析，搜索原始的
                结构化或非架构化的数据，形成新的数据信息仓库。根据事先定义的分析引
                擎去对提取的信息进行关联分析。[25]</span>
         </div>
          <div style="margin-top: 60px">
            注释#13:数据沙盒先可以结合合规性规则，实现对数据安全法、网络安全审查管理办法、GDPR、PII 等中国、欧
            美合规要求，帮助企业更好地确保企业拥有敏感数据的私密性。
          </div>
        </el-drawer>
      </div>
      <div style="margin-top: 20px">
        <span
            type="primary"
            style="margin-left: 45px; color: #429ccd; cursor: pointer"
            @click="drawer4 = true"
        >
          重要性（敏感性）分析
        </span>
        <el-drawer
            v-model="drawer4"
            title="重要性（敏感性）分析"
            :with-header="false"
        >
          <div style="margin-top: 20px">
           <span style="display: block; text-indent: 2em;">重要性（敏感性）分析是合规性分析的一个重要延伸。合规性分析更多是多
                  违规、违法数据的处理（即不在组织运营或权责范围内的数据进行处理）。重要
                  性（敏感性）分析聚焦在组织权责范围内运营的数据进行数据重要程度和个人信
                  息的敏感程度进行分析。</span>
            <h5 style="display: block; margin-top: 10px;">基本概念</h5>
            <span style="display: block; text-indent: 2em;">重要性（敏感性）分析指通过设置各种环境敏感数据类别和数据安全性等级，
                  设置敏感数据检索系统，不间断对各种环境数据进行敏感性检测，发现并标识各
                  类敏感数据，并进行相应保护等级的标准。</span>
            <h5 style="display: block; margin-top: 10px;">主要实现</h5>
            <span style="display: block; text-indent: 2em;">13 数据沙盒先可以结合合规性规则，实现对数据安全法、网络安全审查管理办法、GDPR、PII 等中国、欧
                  美合规要求，帮助企业更好地确保企业拥有敏感数据的私密性。</span>
            <span style="display: block; text-indent: 2em;">针对结构化数据的重要性（敏感性）分析是当前数据安全重点工作之一。结
                  构化数据的重要性（敏感性）分析主要实现方式为通过定期全库扫描，识别敏感
                  字段（周期触发）；新增或修改表和字段，增量扫描识别出敏感字段；监听数据
                  库对表或字段，指定表或字段进行敏感识别扫描，结合数据库代理服务；手动触
                  发扫描。具体方法如下：</span>
            <span style="display: block; text-indent: 2em;margin: 10px;"><b># 基于元数据的敏感数据识别（敏感词库+关键词匹配）</b></span>
            <span style="display: block; text-indent: 2em;">定义敏感数据的关键词匹配式，通过精确或模糊匹配表字段名称、注释等信
                  息，利用元数据信息对数据库表、文件进行逐个字段匹配，当发现字段满足
                  关键词匹配式时，判断为敏感数据并自动定级。这种匹配方式成本低、见效
                  快，可识别全网 50%以上的客户敏感数据。</span>
            <span style="display: block; text-indent: 2em;margin: 10px;"><b># 基于数据内容的敏感数据识别（正则表达式）</b></span>
            <span style="display: block; text-indent: 2em;">有些临时表或历史上开发的未按照规范建立的敏感表，根据元数据无法判断
                  是否为敏感数据，这种情况更多是靠分析数据内容来判断。自动化工具通过
                  扫描获取这些表，将系统中大量数值型、英文型的敏感信息（如手机号、身
                  份证号、邮箱等）通过预先定义正则表达式的方式进行匹配，做出敏感数据
                  及其级别的判定。</span>
            <span style="display: block; text-indent: 2em;margin: 10px;"><b># 基于自然语言处理技术的中文模糊识别（敏感词库+分词+相似度计算）</b></span>
            <span style="display: block; text-indent: 2em;">前面两种方式可以发现系统中大部分的客户敏感数据，但系统中还保存了部
                  分中文信息，无法通过上述两种方式很好地发现。因此，引入 NLP 自然语言
                  处理技术加中文近似词比对的方式进行识别。首先，根据数据内容整理输出
                  一份常用敏感词，该敏感词列表需具备一定的学习能力，可以动态添加敏感
                  词；其次，通过 NLP 对中文内容进行分词，通过中文近似词比对算法计算分
                  词内容和敏感词的相似度，若相似度超过某个阈值，则认为内容符合敏感词
                  所属的分类分级。[31]</span>
          </div>

        </el-drawer>
      </div>

    </div>
    <!-- 评论区 -->
    <div class="comments-section">
      <h3>评论区</h3>
      <div v-for="item in comments" :key="item.id" class="comment-item">
        <div>
          <strong>{{ item.username }}:</strong> <span>{{ item.content }}</span>
        </div>
        <span
            style="color: red; cursor: pointer"
            v-if="item.username === commentForm.username"
            @click="del(item.id)"
        >删除</span
        >
      </div>
      <div>
        <el-input
            class="comment-input"
            type="textarea"
            v-model="commentForm.content"
            placeholder="请输入评论内容"
        ></el-input>
      </div>
      <el-button class="comment-button" type="primary" @click="comment"
      >评论</el-button
      >

      <el-message
          v-if="errorMessage"
          :type="'error'"
          :message="errorMessage"
      ></el-message>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request.js";
import { ref } from "vue";
const drawer = ref(false);

export default {
  data() {
    return {
      tableData: [
        {
          title: "数据资产处理（分析）",
          content:
              "当前，常规的、可控的、静态的数据分类分级已有较好的技术支撑，但针对\n" +
              "多格式的、自动采集、动态的数据安全分类分级特别要求在数据资产识别后，需\n" +
              "要优先进行数据资产处理。",
          basis:
              "数据资产处理（分析）指在数据清洗的基础上，针对已采集和识别的重要数\n" +
              "据资产和个人信息进行合规和安全处理。",
          main:
              "通常，数据资产处理（分析）要首先对数据内容进行识别，然后再进行安全\n" +
              "性分析、合规性分析、重要性（敏感性）分析等。",
        },

      ],
      comments: [],
      pageId: 4,
      commentForm: {
        content: "",
        username: "", // 用户名会在 mounted 生命周期钩子中生成
        userId: "", // 用户 ID 会在 mounted 生命周期钩子中生成
      },
      errorMessage: "",
      drawer1: false,
      drawer2: false,
      drawer3: false,
      drawer4:false,
    };
  },
  methods: {
    generateUserId() {
      // 生成唯一用户ID，例如使用随机数或UUID
      return "user_" + Math.random().toString(36).substr(2, 9);
    },
    generateUsername() {
      // 生成自动用户名，例如基于时间戳或随机字符串
      return "User_" + Math.random().toString(36).substr(2, 5);
    },
    del(commentId) {
      // 获取要删除的评论
      const comment = this.comments.find((c) => c.id === commentId);

      if (comment) {
        // 只允许删除自己评论
        if (comment.username === this.commentForm.username) {
          request
              .delete(`/comments/${commentId}`)
              .then(() => {
                this.$message.success("评论删除成功");
                this.load(); // 重新加载评论列表
              })
              .catch((error) => {
                console.error("删除评论失败:", error);
                this.$message.error("删除评论失败");
              });
        } else {
          this.$message.error("您没有权限删除此评论");
        }
      } else {
        this.$message.error("评论未找到");
      }
    },
    load() {
      request
          .get("/comments/" + this.pageId)
          .then((res) => {
            this.comments = res.data;
          })
          .catch((error) => {
            console.error("加载评论失败:", error);
          });
    },
    comment() {
      this.errorMessage = "";
      if (!this.commentForm.content.trim()) {
        this.errorMessage = "评论不能为空";
        return;
      }
      // 使用自动生成的用户名
      request
          .post("/comments/" + this.pageId, {
            content: this.commentForm.content,
            username: this.commentForm.username,
            userId: this.commentForm.userId,
          })
          .then(() => {
            this.$message.success("评论成功");
            this.commentForm.content = "";
            this.load();
          })
          .catch((error) => {
            console.error("提交评论失败:", error);
            this.$message.error("提交评论失败");
          });
    },
  },
  mounted() {
    this.commentForm.username = this.generateUsername(); // 在 mounted 生命周期钩子中生成用户名
    this.commentForm.userId = this.generateUserId(); // 在 mounted 生命周期钩子中生成用户 ID
    this.load();
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  .shibie {
    width: 100%;
    padding: 30px;
    .shibie_title {
      font-size: 36px;
      margin: 0 0 10px 0;
    }
  }
  .shibie_explain {
    margin: 20px 0 0 30px;
  }
  .comments-section {
    padding: 20px;
    height: 400px;
    margin-left: 20px;
    // 评论列表样式
    .comment-item {
      padding: 10px;
      margin-left: 10px;
    }
    .comment-input {
      margin: 15px 0;
    }
    .comment-button {
      width: 80px;
      height: 40px;
      font-size: 18px;
    }
  }
}
</style>;
